{{ header }}
{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-module" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
    <div class="container-fluid">
      {% if error_warning %}
        <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
          <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
      {% endif %}
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_edit }}</h3>
        </div>
        <div class="panel-body">
          <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-module" class="form-horizontal">
            <div class="form-group required">
              <label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
              <div class="col-sm-10">
                <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control" />
                {% if error_name %}
                  <div class="text-danger">{{ error_name }}</div>
                {% endif %}
              </div>
            </div>
            <div class="form-group required">
              <label class="col-sm-2 control-label" for="input-image">{{ entry_image }}</label>
              <div class="col-sm-10">
                <a href="" id="thumb-image" data-toggle="image" class="img-thumbnail">
                  <img src="{{ thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" />
                </a>
                <input type="hidden" name="image" value="{{ image }}" id="input-image" />
                {% if error_image %}
                  <div class="text-danger">{{ error_image }}</div>
                {% endif %}
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-link">{{ entry_link }}</label>
              <div class="col-sm-10">
                <input type="text" name="link" value="{{ link }}" placeholder="{{ entry_link }}" id="input-link" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-color">{{ entry_color }}</label>
              <div class="col-sm-10">
                <input type="text" name="color" value="{{ color }}" placeholder="{{ entry_color }}" id="input-color" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-bg-status">{{ entry_bg_status }}</label>
              <div class="col-sm-10">
                <select name="bg_status" id="input-bg-status" class="form-control">
                  {% if bg_status %}
                    <option value="1" selected="selected">{{ text_true }}</option>
                    <option value="0">{{ text_false }}</option>
                  {% else %}
                    <option value="1">{{ text_true }}</option>
                    <option value="0" selected="selected">{{ text_false }}</option>
                  {% endif %}
                </select>
              </div>
            </div>
            <div class="form-group required">
              <label class="col-sm-2 control-label" for="input-width">{{ entry_width }}</label>
              <div class="col-sm-10">
                <input type="text" name="width" value="{{ width }}" placeholder="{{ entry_width }}" id="input-width" class="form-control" />
                {% if error_width %}
                  <div class="text-danger">{{ error_width }}</div>
                {% endif %}
              </div>
            </div>
            <div class="form-group required">
              <label class="col-sm-2 control-label" for="input-height">{{ entry_height }}</label>
              <div class="col-sm-10">
                <input type="text" name="height" value="{{ height }}" placeholder="{{ entry_height }}" id="input-height" class="form-control" />
                {% if error_height %}
                  <div class="text-danger">{{ error_height }}</div>
                {% endif %}
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-position">{{ entry_position }}</label>
              <div class="col-sm-10">
                <select name="position" id="input-position" class="form-control">
                  <option value="0"{% if position == false %} selected="selected"{% endif %}>{{ text_home }}</option>
                  <option value="1"{% if position == 1 %} selected="selected"{% endif %}>{{ text_category }}</option>
                  <option value="2"{% if position == 2 %} selected="selected"{% endif %}>{{ text_product }}</option>
                </select>
              </div>
            </div>
            <div class="form-group hidden" id="filter-category">
              <label class="col-sm-2 control-label" for="input-category"><span data-toggle="tooltip" title="{{ help_category }}">{{ entry_category }}</span></label>
              <div class="col-sm-10">
                <input type="text" name="category" value="" placeholder="{{ entry_category }}" id="input-category" class="form-control" />
                <div id="product-category" class="well well-sm" style="height: 150px; overflow: auto;">
                  {% for category in categories %}
                    <div id="category{{ category.category_id }}"><i class="fa fa-minus-circle"></i> {{ category.name }}
                      <input type="hidden" name="category[]" value="{{ category.category_id }}" />
                    </div>
                  {% endfor %}
                </div>
              </div>
            </div>
            <div class="form-group hidden" id="filter-product">
              <label class="col-sm-2 control-label" for="input-product"><span data-toggle="tooltip" title="{{ help_product }}">{{ entry_product }}</span></label>
              <div class="col-sm-10">
                <input type="text" name="product" value="" placeholder="{{ entry_product }}" id="input-product" class="form-control" />
                <div id="product-product" class="well well-sm" style="height: 150px; overflow: auto;">
                  {% for product in products %}
                    <div id="product-related{{ product.product_id }}"><i class="fa fa-minus-circle"></i> {{ product.name }}
                      <input type="hidden" name="product[]" value="{{ product.product_id }}" />
                    </div>
                  {% endfor %}
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
              <div class="col-sm-10">
                <select name="status" id="input-status" class="form-control">
                  {% if status %}
                    <option value="1" selected="selected">{{ text_enabled }}</option>
                    <option value="0">{{ text_disabled }}</option>
                  {% else %}
                    <option value="1">{{ text_enabled }}</option>
                    <option value="0" selected="selected">{{ text_disabled }}</option>
                  {% endif %}
                </select>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $("#input-color").spectrum({
    color: "{{ color }}",
    preferredFormat: 'rgb'
  });
  $(function () {
    $('select[name="position"]').change(function () {
      var position = $(this).find('option:selected').val();
      console.log(position);
      if (!position || parseInt(position) == 0) {
        if (!$('#filter-category').hasClass('hidden')) {
          $('#filter-category').addClass('hidden');
        }
        if (!$('#filter-product').hasClass('hidden')) {
          $('#filter-product').addClass('hidden');
        }
      } else if (position == 1) {
        if ($('#filter-category').hasClass('hidden')) {
          $('#filter-category').removeClass('hidden');
        }
        if (!$('#filter-product').hasClass('hidden')) {
          $('#filter-product').addClass('hidden');
        }
      } else if (position == 2) {
        if (!$('#filter-category').hasClass('hidden')) {
          $('#filter-category').addClass('hidden');
        }
        if ($('#filter-product').hasClass('hidden')) {
          $('#filter-product').removeClass('hidden');
        }
      }
    });
    $('select[name="position"]').trigger('change');
  });

  // Category
  $('input[name=\'category\']').autocomplete({
    'source': function(request, response) {
      $.ajax({
        url: 'index.php?route=catalog/category/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
        dataType: 'json',
        success: function(json) {
          response($.map(json, function(item) {
            return {
              label: item['name'],
              value: item['category_id']
            }
          }));
        }
      });
    },
    'select': function(item) {
      $('input[name=\'category\']').val('');

      $('#category' + item['value']).remove();

      $('#product-category').append('<div id="category' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="category[]" value="' + item['value'] + '" /></div>');
    }
  });

  $('#product-category').delegate('.fa-minus-circle', 'click', function() {
    $(this).parent().remove();
  });

  // Product
  $('input[name=\'product\']').autocomplete({
    'source': function(request, response) {
      $.ajax({
        url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
        dataType: 'json',
        success: function(json) {
          response($.map(json, function(item) {
            return {
              label: item['name'],
              value: item['product_id']
            }
          }));
        }
      });
    },
    'select': function(item) {
      $('input[name=\'related\']').val('');

      $('#product-related' + item['value']).remove();

      $('#product-product').append('<div id="product' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="product[]" value="' + item['value'] + '" /></div>');
    }
  });

  $('#product-product').delegate('.fa-minus-circle', 'click', function() {
    $(this).parent().remove();
  });
</script>
{{ footer }}